/*
* name:wei-ui.css;
* version: v0.0.1;
* update: build;
* date: 2015-07-09;
*/

/* animation sets :
0：默认
1：左平移
2：右平移
3：上平移
4：下平移
5：左平移背景渐隐
6：右平移背景渐隐
7：上平移背景渐隐
8：下平移背景渐隐
9-12 == 5-8
13：左推动
14：右推动
15：上推动
16：下推动
17：左平移背景反向渐隐
18：右平移背景反向渐隐
19：上平移背景反向渐隐
20：下平移背景反向渐隐
21：挤压渐隐扩散渐显
22：扩散渐隐挤压渐显
23：左飞出背景翻板
24：右飞出背景翻板
25：上飞出背景翻板
26：下飞出背景翻板
27：挤压渐隐挤压渐显
28：挤压渐隐右飞入
29：挤压渐隐左飞入
30：挤压渐隐上飞入
31：挤压渐隐下飞入
32-33：竖向翻板
34-35：横向翻板
36：右倾渐隐扩散渐显
37：顺时针漩涡
38-41 == 17-20
42-43：快速竖向翻板
44-45：快速横向翻板
46：左飞入加速渐隐
47：右飞入加速渐隐
48：上飞入加速渐隐
49：下飞入加速渐隐
50：立方体右旋
51：立方体左旋
52：立方体上旋
53：立方体下旋
54-57 == 46-49
58：左飞入减速渐隐
59：右飞入减速渐隐
60：上飞入减速渐隐
61：下飞入减速渐隐
62：快速左飞出
63：快速右飞出
64：快速上飞出
65：快速下飞出
66：重影纵向翻板
67：半透明左飞出
68-69：渐隐渐显

*/
/* animation delay classes */

.delay100 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s;}
.delay200 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s;}
.delay300 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
.delay400 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s;}
.delay500 { -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
.delay600 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.delay700 { -webkit-animation-delay: 0.7s; animation-delay: 0.7s;}
.delay800 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s;}
.delay900 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
.delay1000 { -webkit-animation-delay: 1s; animation-delay: 1s;}

.ontop { z-index: 999;}
/* move from / to  */

.pt-page-moveToLeft { -webkit-animation: moveToLeft 0.6s ease both; animation: moveToLeft 0.6s ease both; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}

.pt-page-moveFromLeft { -webkit-animation: moveFromLeft 0.6s ease both; animation: moveFromLeft 0.6s ease both;}

.pt-page-moveToRight { -webkit-animation: moveToRight 0.6s ease both; animation: moveToRight 0.6s ease both;}

.pt-page-moveFromRight { -webkit-animation: moveFromRight 0.6s ease both; animation: moveFromRight 0.6s ease both; -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}

.pt-page-moveToTop { -webkit-animation: moveToTop 0.6s ease both; animation: moveToTop 0.6s ease both;}

.pt-page-moveFromTop { -webkit-animation: moveFromTop 0.6s ease both; animation: moveFromTop 0.6s ease both;}

.pt-page-moveToBottom { -webkit-animation: moveToBottom 0.6s ease both; animation: moveToBottom 0.6s ease both;}

.pt-page-moveFromBottom { -webkit-animation: moveFromBottom 0.6s ease both; animation: moveFromBottom 0.6s ease both;}

/* fade */

.pt-page-fade { -webkit-animation: fade 0.7s ease both; animation: fade 0.7s ease both;}

/* move from / to and fade */

.pt-page-moveToLeftFade { -webkit-animation: moveToLeftFade 0.7s ease both; animation: moveToLeftFade 0.7s ease both;}

.pt-page-moveFromLeftFade { -webkit-animation: moveFromLeftFade 0.7s ease both; animation: moveFromLeftFade 0.7s ease both;}

.pt-page-moveToRightFade { -webkit-animation: moveToRightFade 0.7s ease both; animation: moveToRightFade 0.7s ease both;}

.pt-page-moveFromRightFade { -webkit-animation: moveFromRightFade 0.7s ease both; animation: moveFromRightFade 0.7s ease both;}

.pt-page-moveToTopFade { -webkit-animation: moveToTopFade 0.7s ease both; animation: moveToTopFade 0.7s ease both;}

.pt-page-moveFromTopFade { -webkit-animation: moveFromTopFade 0.7s ease both; animation: moveFromTopFade 0.7s ease both;}

.pt-page-moveToBottomFade { -webkit-animation: moveToBottomFade 0.7s ease both; animation: moveToBottomFade 0.7s ease both;}

.pt-page-moveFromBottomFade { -webkit-animation: moveFromBottomFade 0.7s ease both; animation: moveFromBottomFade 0.7s ease both;}

/* move to with different easing */

.pt-page-moveToLeftEasing { -webkit-animation: moveToLeft 0.7s ease-in-out both; animation: moveToLeft 0.7s ease-in-out both;}
.pt-page-moveToRightEasing { -webkit-animation: moveToRight 0.7s ease-in-out both; animation: moveToRight 0.7s ease-in-out both;}
.pt-page-moveToTopEasing { -webkit-animation: moveToTop 0.7s ease-in-out both; animation: moveToTop 0.7s ease-in-out both;}
.pt-page-moveToBottomEasing { -webkit-animation: moveToBottom 0.7s ease-in-out both; animation: moveToBottom 0.7s ease-in-out both;}

/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes moveToLeft { to { -webkit-transform: translate3d(-100%,0,0);}}
@keyframes moveToLeft { to { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}}

@-webkit-keyframes moveFromLeft { from { -webkit-transform: translate3d(-100%,0,0);}}
@keyframes moveFromLeft { from { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}}

@-webkit-keyframes moveToRight { to { -webkit-transform: translate3d(100%,0,0);}}
@keyframes moveToRight { to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);}}

@-webkit-keyframes moveFromRight { from { -webkit-transform: translate3d(100%,0,0);}}
@keyframes moveFromRight { from { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);}}

@-webkit-keyframes moveToTop { to { -webkit-transform: translate3d(0,-100%,0);}}
@keyframes moveToTop { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0);}}

@-webkit-keyframes moveFromTop { from { -webkit-transform: translate3d(0,-100%,0);}}
@keyframes moveFromTop { from { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0);}}

@-webkit-keyframes moveToBottom { to { -webkit-transform: translate3d(0,100%,0);}}
@keyframes moveToBottom { to { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0);}}

@-webkit-keyframes moveFromBottom { from { -webkit-transform: translate3d(0,100%,0);}}
@keyframes moveFromBottom { from { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0);}}

/* fade */

@-webkit-keyframes fade { to { opacity: 0.3;}}
@keyframes fade { to { opacity: 0.3;}}

/* move from / to and fade */

@-webkit-keyframes moveToLeftFade { to { -webkit-transform: translate3d(-100%,0,0); opacity: 0.3;}}
@keyframes moveToLeftFade { to { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); opacity: 0.3;}}

@-webkit-keyframes moveFromLeftFade { from { -webkit-transform: translate3d(-100%,0,0); opacity: 0.3;}}
@keyframes moveFromLeftFade { from { -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); opacity: 0.3;}}

@-webkit-keyframes moveToRightFade { to { -webkit-transform: translate3d(100%,0,0); opacity: 0.3;}}
@keyframes moveToRightFade { to { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0.3;}}

@-webkit-keyframes moveFromRightFade { from { -webkit-transform: translate3d(100%,0,0); opacity: 0.3;}}
@keyframes moveFromRightFade { from { -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity: 0.3;}}

@-webkit-keyframes moveToTopFade { to { -webkit-transform: translate3d(0,-100%,0); opacity: 0.3;}}
@keyframes moveToTopFade { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); opacity: 0.3;}}

@-webkit-keyframes moveFromTopFade { from { -webkit-transform: translate3d(0,-100%,0); opacity: 0.3;}}
@keyframes moveFromTopFade { from { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); opacity: 0.3;}}

@-webkit-keyframes moveToBottomFade { to { -webkit-transform: translate3d(0,100%,0); opacity: 0.3;}}
@keyframes moveToBottomFade { to { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); opacity: 0.3;}}

@-webkit-keyframes moveFromBottomFade { from { -webkit-transform: translate3d(0,100%,0); opacity: 0.3;}}
@keyframes moveFromBottomFade { from { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); opacity: 0.3;}}

/* scale and fade */

.pt-page-scaleDown { -webkit-animation: scaleDown 0.7s ease both; animation: scaleDown 0.7s ease both;}

.pt-page-scaleUp { -webkit-animation: scaleUp 0.7s ease both; animation: scaleUp 0.7s ease both;}

.pt-page-scaleUpDown { -webkit-animation: scaleUpDown 0.5s ease both; animation: scaleUpDown 0.5s ease both;}

.pt-page-scaleDownUp { -webkit-animation: scaleDownUp 0.5s ease both; animation: scaleDownUp 0.5s ease both;}

.pt-page-scaleDownCenter { -webkit-animation: scaleDownCenter 0.4s ease-in both; animation: scaleDownCenter 0.4s ease-in both;}

.pt-page-scaleUpCenter { -webkit-animation: scaleUpCenter 0.4s ease-out both; animation: scaleUpCenter 0.4s ease-out both;}

/********************************* keyframes **************************************/

/* scale and fade */

@-webkit-keyframes scaleDown { to { -webkit-transform: scale3d(0.5, 1, 1); opacity: 0;}}
@keyframes scaleDown { to { -webkit-transform: scale3d(0.5, 1, 1); transform: scale3d(0.5, 1, 1); opacity: 0;}}

@-webkit-keyframes scaleUp { from { -webkit-transform: scale3d(0.5, 1, 1); opacity: 0;}}
@keyframes scaleUp { from { -webkit-transform: scale3d(0.5, 1, 1); transform: scale3d(0.5, 1, 1); opacity: 0;}}

@-webkit-keyframes scaleUpDown { from { -webkit-transform: scale3d(1.2, 1, 1); opacity: 0;}}
@keyframes scaleUpDown { from { -webkit-transform: scale3d(1.2, 1, 1); transform: scale3d(1.2, 1, 1); opacity: 0;}}

@-webkit-keyframes scaleDownUp { to { -webkit-transform: scale3d(1.2, 1, 1); opacity: 0;}}
@keyframes scaleDownUp { to { -webkit-transform: scale3d(1.2, 1, 1); transform: scale3d(1.2, 1, 1); opacity: 0;}}

@-webkit-keyframes scaleDownCenter { to { -webkit-transform: scale3d(0.7, 1, 1); opacity: 0;}}
@keyframes scaleDownCenter { to { -webkit-transform: scale3d(0.7, 1, 1); transform: scale3d(0.7, 1, 1); opacity: 0;}}

@-webkit-keyframes scaleUpCenter { from { -webkit-transform: scale3d(0.7, 1, 1); opacity: 0;}}
@keyframes scaleUpCenter { from { -webkit-transform: scale3d(0.7, 1, 1); transform: scale3d(0.7, 1, 1); opacity: 0;}}

/* rotate sides first and scale */

.pt-page-rotateRightSideFirst { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateRightSideFirst 0.5s both ease-in; animation: rotateRightSideFirst 0.5s both ease-in;}
.pt-page-rotateLeftSideFirst { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateLeftSideFirst 0.5s both ease-in; animation: rotateLeftSideFirst 0.5s both ease-in;}
.pt-page-rotateTopSideFirst { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateTopSideFirst 0.5s both ease-in; animation: rotateTopSideFirst 0.5s both ease-in;}
.pt-page-rotateBottomSideFirst { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateBottomSideFirst 0.5s both ease-in; animation: rotateBottomSideFirst 0.5s both ease-in;}

/* flip */

.pt-page-flipOutRight { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutRight 0.5s both ease-in; animation: flipOutRight 0.5s both ease-in;}
.pt-page-flipInLeft { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInLeft 0.5s both ease-out; animation: flipInLeft 0.5s both ease-out;}
.pt-page-flipOutLeft { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutLeft 0.5s both ease-in; animation: flipOutLeft 0.5s both ease-in;}
.pt-page-flipInRight { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInRight 0.5s both ease-out; animation: flipInRight 0.5s both ease-out;}
.pt-page-flipOutTop { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutTop 0.5s both ease-in; animation: flipOutTop 0.5s both ease-in;}
.pt-page-flipInBottom { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInBottom 0.5s both ease-out; animation: flipInBottom 0.5s both ease-out;}
.pt-page-flipOutBottom { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipOutBottom 0.5s both ease-in; animation: flipOutBottom 0.5s both ease-in;}
.pt-page-flipInTop { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: flipInTop 0.5s both ease-out; animation: flipInTop 0.5s both ease-out;}

/* rotate fall */

.pt-page-rotateFall { -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: rotateFall 1s both ease-in; animation: rotateFall 1s both ease-in;}

/* rotate newspaper */
.pt-page-rotateOutNewspaper { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateOutNewspaper 0.5s both ease-in; animation: rotateOutNewspaper 0.5s both ease-in;}
.pt-page-rotateInNewspaper { -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: rotateInNewspaper 0.5s both ease-out; animation: rotateInNewspaper 0.5s both ease-out;}

/* push */
.pt-page-rotatePushLeft { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotatePushLeft 0.5s both ease; animation: rotatePushLeft 0.5s both ease;}
.pt-page-rotatePushRight { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotatePushRight 0.5s both ease; animation: rotatePushRight 0.5s both ease;}
.pt-page-rotatePushTop { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotatePushTop 0.5s both ease; animation: rotatePushTop 0.5s both ease;}
.pt-page-rotatePushBottom { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotatePushBottom 0.5s both ease; animation: rotatePushBottom 0.5s both ease;}

/* pull */
.pt-page-rotatePullRight { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotatePullRight 0.5s both ease; animation: rotatePullRight 0.5s both ease;}
.pt-page-rotatePullLeft { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotatePullLeft 0.5s both ease; animation: rotatePullLeft 0.5s both ease;}
.pt-page-rotatePullTop { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotatePullTop 0.5s both ease; animation: rotatePullTop 0.5s both ease;}
.pt-page-rotatePullBottom { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotatePullBottom 0.5s both ease; animation: rotatePullBottom 0.5s both ease;}

/* fold */
.pt-page-rotateFoldRight { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateFoldRight 0.7s both ease; animation: rotateFoldRight 0.7s both ease;}
.pt-page-rotateFoldLeft { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateFoldLeft 0.7s both ease; animation: rotateFoldLeft 0.7s both ease;}
.pt-page-rotateFoldTop { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateFoldTop 0.7s both ease; animation: rotateFoldTop 0.7s both ease;}
.pt-page-rotateFoldBottom { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateFoldBottom 0.7s both ease; animation: rotateFoldBottom 0.7s both ease;}

/* unfold */
.pt-page-rotateUnfoldLeft { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateUnfoldLeft 0.7s both ease; animation: rotateUnfoldLeft 0.7s both ease;}
.pt-page-rotateUnfoldRight { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateUnfoldRight 0.7s both ease; animation: rotateUnfoldRight 0.7s both ease;}
.pt-page-rotateUnfoldTop { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateUnfoldTop 0.7s both ease; animation: rotateUnfoldTop 0.7s both ease;}
.pt-page-rotateUnfoldBottom { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateUnfoldBottom 0.7s both ease; animation: rotateUnfoldBottom 0.7s both ease;}

/* room walls */
.pt-page-rotateRoomLeftOut { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateRoomLeftOut 0.5s both ease; animation: rotateRoomLeftOut 0.5s both ease;}
.pt-page-rotateRoomLeftIn { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateRoomLeftIn 0.5s both ease; animation: rotateRoomLeftIn 0.5s both ease;}
.pt-page-rotateRoomRightOut { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateRoomRightOut 0.5s both ease; animation: rotateRoomRightOut 0.5s both ease;}
.pt-page-rotateRoomRightIn { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateRoomRightIn 0.5s both ease; animation: rotateRoomRightIn 0.5s both ease;}
.pt-page-rotateRoomTopOut { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateRoomTopOut 0.5s both ease; animation: rotateRoomTopOut 0.5s both ease;}
.pt-page-rotateRoomTopIn { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateRoomTopIn 0.5s both ease; animation: rotateRoomTopIn 0.5s both ease;}
.pt-page-rotateRoomBottomOut { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateRoomBottomOut 0.5s both ease; animation: rotateRoomBottomOut 0.5s both ease;}
.pt-page-rotateRoomBottomIn { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateRoomBottomIn 0.5s both ease; animation: rotateRoomBottomIn 0.5s both ease;}

/* cube */
.pt-page-rotateCubeLeftOut { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCubeLeftOut 0.6s both ease-in; animation: rotateCubeLeftOut 0.6s both ease-in;}
.pt-page-rotateCubeLeftIn { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCubeLeftIn 0.6s both ease-in; animation: rotateCubeLeftIn 0.6s both ease-in;}
.pt-page-rotateCubeRightOut { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCubeRightOut 0.6s both ease-in; animation: rotateCubeRightOut 0.6s both ease-in;}
.pt-page-rotateCubeRightIn { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCubeRightIn 0.6s both ease-in; animation: rotateCubeRightIn 0.6s both ease-in;}
.pt-page-rotateCubeTopOut { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCubeTopOut 0.6s both ease-in; animation: rotateCubeTopOut 0.6s both ease-in;}
.pt-page-rotateCubeTopIn { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCubeTopIn 0.6s both ease-in; animation: rotateCubeTopIn 0.6s both ease-in;}
.pt-page-rotateCubeBottomOut { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCubeBottomOut 0.6s both ease-in; animation: rotateCubeBottomOut 0.6s both ease-in;}
.pt-page-rotateCubeBottomIn { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCubeBottomIn 0.6s both ease-in; animation: rotateCubeBottomIn 0.6s both ease-in;}

/* carousel */
.pt-page-rotateCarouselLeftOut { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCarouselLeftOut 0.5s both ease; animation: rotateCarouselLeftOut 0.5s both ease;}
.pt-page-rotateCarouselLeftIn { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCarouselLeftIn 0.5s both ease; animation: rotateCarouselLeftIn 0.5s both ease;}
.pt-page-rotateCarouselRightOut { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation: rotateCarouselRightOut 0.5s both ease; animation: rotateCarouselRightOut 0.5s both ease;}
.pt-page-rotateCarouselRightIn { -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: rotateCarouselRightIn 0.5s both ease; animation: rotateCarouselRightIn 0.5s both ease;}
.pt-page-rotateCarouselTopOut { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCarouselTopOut 0.5s both ease; animation: rotateCarouselTopOut 0.5s both ease;}
.pt-page-rotateCarouselTopIn { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCarouselTopIn 0.5s both ease; animation: rotateCarouselTopIn 0.5s both ease;}
.pt-page-rotateCarouselBottomOut { -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: rotateCarouselBottomOut 0.5s both ease; animation: rotateCarouselBottomOut 0.5s both ease;}
.pt-page-rotateCarouselBottomIn { -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: rotateCarouselBottomIn 0.5s both ease; animation: rotateCarouselBottomIn 0.5s both ease;}

/* sides */
.pt-page-rotateSidesOut { -webkit-transform-origin: -50% 50%; -ms-transform-origin: -50% 50%; transform-origin: -50% 50%; -webkit-animation: rotateSidesOut 0.5s both ease-in; animation: rotateSidesOut 0.5s both ease-in;}
.pt-page-rotateSidesIn { -webkit-transform-origin: 150% 50%; -ms-transform-origin: 150% 50%; transform-origin: 150% 50%; -webkit-animation: rotateSidesIn 0.5s both ease-out; animation: rotateSidesIn 0.5s both ease-out;}

/* slide */
.pt-page-rotateSlideOut { -webkit-animation: rotateSlideOut 1s both ease; animation: rotateSlideOut 1s both ease;}
.pt-page-rotateSlideIn { -webkit-animation: rotateSlideIn 1s both ease; animation: rotateSlideIn 1s both ease;}

/********************************* keyframes **************************************/

/* rotate sides first and scale */

@-webkit-keyframes rotateRightSideFirst { 40% { -webkit-transform: rotate3d(0, 1, 0, 15deg); -webkit-animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}
@keyframes rotateRightSideFirst { 40% { -webkit-transform: rotate3d(0, 1, 0, 15deg); transform: rotate3d(0, 1, 0, 15deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}

@-webkit-keyframes rotateLeftSideFirst { 40% { -webkit-transform: rotate3d(0, 1, 0,-15deg); -webkit-animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}
@keyframes rotateLeftSideFirst { 40% { -webkit-transform: rotate3d(0, 1, 0,-15deg); transform: rotate3d(0, 1, 0,-15deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}

@-webkit-keyframes rotateTopSideFirst { 40% { -webkit-transform: rotate3d(1, 0, 0, 15deg); -webkit-animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}
@keyframes rotateTopSideFirst { 40% { -webkit-transform: rotate3d(1, 0, 0, 15deg); transform: rotate3d(1, 0, 0, 15deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}

@-webkit-keyframes rotateBottomSideFirst { 40% { -webkit-transform: rotate3d(1, 0, 0, -15deg); -webkit-animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}
@keyframes rotateBottomSideFirst { 40% { -webkit-transform: rotate3d(1, 0, 0, -15deg); transform: rotate3d(1, 0, 0, -15deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 0.5;}
    100% { -webkit-transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); transform: scale3d(0.5, 1, 1) translate3d(0,0,-200px); opacity: 0;}}

/* flip */

@-webkit-keyframes flipOutRight { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, 90deg); opacity: 0.2;}}
@keyframes flipOutRight { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, 90deg); transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, 90deg); opacity: 0.2;}}

@-webkit-keyframes flipInLeft { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, -90deg); opacity: 0.2;}}
@keyframes flipInLeft { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, -90deg); transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, -90deg); opacity: 0.2;}}

@-webkit-keyframes flipOutLeft { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, -90deg); opacity: 0.2;}}
@keyframes flipOutLeft { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, -90deg); transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, -90deg); opacity: 0.2;}}

@-webkit-keyframes flipInRight { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, 90deg); opacity: 0.2;}}
@keyframes flipInRight { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, 90deg); transform: translate3d(0,0,-1000px) rotate3d(0, 1, 0, 90deg); opacity: 0.2;}}

@-webkit-keyframes flipOutTop { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, 90deg); opacity: 0.2;}}
@keyframes flipOutTop { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, 90deg); opacity: 0.2;}}

@-webkit-keyframes flipInBottom { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, -90deg); opacity: 0.2;}}
@keyframes flipInBottom { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, -90deg); opacity: 0.2;}}

@-webkit-keyframes flipOutBottom { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, -90deg); opacity: 0.2;}}
@keyframes flipOutBottom { to { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, -90deg); opacity: 0.2;}}

@-webkit-keyframes flipInTop { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, 90deg); opacity: 0.2;}}
@keyframes flipInTop { from { -webkit-transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,0,-1000px) rotate3d(1, 0, 0, 90deg); opacity: 0.2;}}

/* fall */

@-webkit-keyframes rotateFall { 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg);}
    20% { -webkit-transform: rotate3d(0, 0, 1, 10deg); -webkit-animation-timing-function: ease-out;}
    40% { -webkit-transform: rotate3d(0, 0, 1, 17deg);}
    60% { -webkit-transform: rotate3d(0, 0, 1, 16deg);}
    100% { -webkit-transform: translate3d(0,100%,0) rotate3d(0, 0, 1, 17deg);}}
@keyframes rotateFall { 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg);}
    20% { -webkit-transform: rotate3d(0, 0, 1, 10deg); transform: rotate3d(0, 0, 1, 10deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
    40% { -webkit-transform: rotate3d(0, 0, 1, 17deg); transform: rotate3d(0, 0, 1, 17deg);}
    60% { -webkit-transform: rotate3d(0, 0, 1, 16deg); transform: rotate3d(0, 0, 1, 16deg);}
    100% { -webkit-transform: translate3d(0,100%,0) rotate3d(0, 0, 1, 17deg); transform: translate3d(0,100%,0) rotate3d(0, 0, 1, 17deg);}}

/* newspaper */

@-webkit-keyframes rotateOutNewspaper { to { -webkit-transform: translate3d(0,0,-3000px) rotate3d(0, 0, 1, 360deg); opacity: 0;}}
@keyframes rotateOutNewspaper { to { -webkit-transform: translate3d(0,0,-3000px) rotate3d(0, 0, 1, 360deg); transform: translate3d(0,0,-3000px) rotate3d(0, 0, 1, 360deg); opacity: 0;}}

@-webkit-keyframes rotateInNewspaper { from { -webkit-transform: translate3d(0,0,-3000px) rotate3d(0, 0, 1, -360deg); opacity: 0;}}
@keyframes rotateInNewspaper { from { -webkit-transform: translate3d(0,0,-3000px) rotate3d(0, 0, 1, -360deg); transform: translate3d(0,0,-3000px) rotate3d(0, 0, 1, -360deg); opacity: 0;}}

/* push */

@-webkit-keyframes rotatePushLeft { to { -webkit-transform: rotate3d(0, 1, 0, 90deg); opacity: 0;}}
@keyframes rotatePushLeft { to { -webkit-transform: rotate3d(0, 1, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotatePushRight { to { -webkit-transform: rotate3d(0, 1, 0, -90deg); opacity: 0;}}
@keyframes rotatePushRight { to { -webkit-transform: rotate3d(0, 1, 0, -90deg); transform: rotate3d(0, 1, 0, -90deg); opacity: 0;}}

@-webkit-keyframes rotatePushTop { to { -webkit-transform: rotate3d(1, 0, 0, -90deg); opacity: 0;}}
@keyframes rotatePushTop { to { -webkit-transform: rotate3d(1, 0, 0, -90deg); transform: rotate3d(1, 0, 0, -90deg); opacity: 0;}}

@-webkit-keyframes rotatePushBottom { to { -webkit-transform: rotate3d(1, 0, 0, 90deg); opacity: 0;}}
@keyframes rotatePushBottom { to { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); opacity: 0;}}

/* pull */

@-webkit-keyframes rotatePullRight { from { -webkit-transform: rotate3d(0, 1, 0, -90deg); opacity: 0;}}
@keyframes rotatePullRight { from { -webkit-transform: rotate3d(0, 1, 0, -90deg); transform: rotate3d(0, 1, 0, -90deg); opacity: 0;}}

@-webkit-keyframes rotatePullLeft { from { -webkit-transform: rotate3d(0, 1, 0, 90deg); opacity: 0;}}
@keyframes rotatePullLeft { from { -webkit-transform: rotate3d(0, 1, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotatePullTop { from { -webkit-transform: rotate3d(1, 0, 0, -90deg); opacity: 0;}}
@keyframes rotatePullTop { from { -webkit-transform: rotate3d(1, 0, 0, -90deg); transform: rotate3d(1, 0, 0, -90deg); opacity: 0;}}

@-webkit-keyframes rotatePullBottom { from { -webkit-transform: rotate3d(1, 0, 0, 90deg); opacity: 0;}}
@keyframes rotatePullBottom { from { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); opacity: 0;}}

/* fold */

@-webkit-keyframes rotateFoldRight { to { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0;}}
@keyframes rotateFoldRight { to { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotateFoldLeft { to { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0;}}
@keyframes rotateFoldLeft { to { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0;}}

@-webkit-keyframes rotateFoldTop { to { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0;}}
@keyframes rotateFoldTop { to { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotateFoldBottom { to { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0;}}
@keyframes rotateFoldBottom { to { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0;}}

/* unfold */

@-webkit-keyframes rotateUnfoldLeft { from { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0;}}
@keyframes rotateUnfoldLeft { from { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0;}}

@-webkit-keyframes rotateUnfoldRight { from { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0;}}
@keyframes rotateUnfoldRight { from { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotateUnfoldTop { from { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0;}}
@keyframes rotateUnfoldTop { from { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotateUnfoldBottom { from { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0;}}
@keyframes rotateUnfoldBottom { from { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0;}}

/* room walls */

@-webkit-keyframes rotateRoomLeftOut { to { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}}
@keyframes rotateRoomLeftOut { to { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, 90deg); transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomLeftIn { from { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}}
@keyframes rotateRoomLeftIn { from { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, -90deg); transform: translate3d(100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomRightOut { to { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}}
@keyframes rotateRoomRightOut { to { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, -90deg); transform: translate3d(100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomRightIn { from { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}}
@keyframes rotateRoomRightIn { from { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, 90deg); transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomTopOut { to { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0.3;}}
@keyframes rotateRoomTopOut { to { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomTopIn { from { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0.3;}}
@keyframes rotateRoomTopIn { from { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomBottomOut { to { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0.3;}}
@keyframes rotateRoomBottomOut { to { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,100%,0) rotate3d(1, 0, 0, 90deg); opacity: 0.3;}}

@-webkit-keyframes rotateRoomBottomIn { from { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0.3;}}
@keyframes rotateRoomBottomIn { from { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, -90deg); opacity: 0.3;}}

/* cube */

@-webkit-keyframes rotateCubeLeftOut { 50% { -webkit-transform: translate3d(-50%,0,-200px) rotate3d(0, 1, 0, -45deg); -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}}
@keyframes rotateCubeLeftOut { 50% { -webkit-transform: translate3d(-50%,0,-200px) rotate3d(0, 1, 0, -45deg); transform: translate3d(-50%,0,-200px) rotate3d(0, 1, 0, -45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}}

@-webkit-keyframes rotateCubeLeftIn { 0% { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}
    50% { -webkit-transform: translate3d(50%,0,-200px) rotate3d(0, 1, 0, 45deg); -webkit-animation-timing-function: ease-out;}}
@keyframes rotateCubeLeftIn { 0% { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}
    50% { -webkit-transform: translate3d(50%,0,-200px) rotate3d(0, 1, 0, 45deg); transform: translate3d(50%,0,-200px) rotate3d(0, 1, 0, 45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}}

@-webkit-keyframes rotateCubeRightOut { 50% { -webkit-transform: translate3d(50%,0,-200px) rotate3d(0, 1, 0, 45deg); -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}}
@keyframes rotateCubeRightOut { 50% { -webkit-transform: translate3d(50%,0,-200px) rotate3d(0, 1, 0, 45deg); transform: translate3d(50%,0,-200px) rotate3d(0, 1, 0, 45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); transform: translate3d(100%,0,0) rotate3d(0, 1, 0, 90deg); opacity: 0.3;}}

@-webkit-keyframes rotateCubeRightIn { 0% { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}
    50% { -webkit-transform: translate3d(-50%,0,-200px) rotate3d(0, 1, 0, -45deg); -webkit-animation-timing-function: ease-out;}}
@keyframes rotateCubeRightIn { 0% { -webkit-transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); transform: translate3d(-100%,0,0) rotate3d(0, 1, 0, -90deg); opacity: 0.3;}
    50% { -webkit-transform: translate3d(-50%,0,-200px) rotate3d(0, 1, 0, -45deg); transform: translate3d(-50%,0,-200px) rotate3d(0, 1, 0, -45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}}

@-webkit-keyframes rotateCubeTopOut { 50% { -webkit-transform: translate3d(0,-50%,-200px) rotate3d(1, 0, 0, 45deg); -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg);}}
@keyframes rotateCubeTopOut { 50% { -webkit-transform: translate3d(0,-50%,-200px) rotate3d(1, 0, 0, 45deg); transform: translate3d(0,-50%,-200px) rotate3d(1, 0, 0, 45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg);}}

@-webkit-keyframes rotateCubeTopIn { 0% { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg);}
    50% { -webkit-transform: translate3d(0,50%,-200px) rotate3d(1, 0, 0, -45deg); -webkit-animation-timing-function: ease-out;}}
@keyframes rotateCubeTopIn { 0% { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg);}
    50% { -webkit-transform: translate3d(0,50%,-200px) rotate3d(1, 0, 0, -45deg); transform: translate3d(0,50%,-200px) rotate3d(1, 0, 0, -45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}}

@-webkit-keyframes rotateCubeBottomOut { 50% { -webkit-transform: translate3d(0,50%,-200px) rotate3d(1, 0, 0, -45deg); -webkit-animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg);}}
@keyframes rotateCubeBottomOut { 50% { -webkit-transform: translate3d(0,50%,-200px) rotate3d(1, 0, 0, -45deg); transform: translate3d(0,50%,-200px) rotate3d(1, 0, 0, -45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
    100% { -webkit-transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg); transform: translate3d(0,100%,0) rotate3d(1, 0, 0, -90deg);}}

@-webkit-keyframes rotateCubeBottomIn { 0% { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg);}
    50% { -webkit-transform: translate3d(0,-50%,-200px) rotate3d(1, 0, 0, 45deg); -webkit-animation-timing-function: ease-out;}}
@keyframes rotateCubeBottomIn { 0% { -webkit-transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg); transform: translate3d(0,-100%,0) rotate3d(1, 0, 0, 90deg);}
    50% { -webkit-transform: translate3d(0,-50%,-200px) rotate3d(1, 0, 0, 45deg); transform: translate3d(0,-50%,-200px) rotate3d(1, 0, 0, 45deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}}

/* carousel */

@-webkit-keyframes rotateCarouselLeftOut { to { -webkit-transform: translate3d(-150%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, -65deg); opacity: 0.3;}}
@keyframes rotateCarouselLeftOut { to { -webkit-transform: translate3d(-150%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, -65deg); transform: translate3d(-150%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, -65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselLeftIn { from { -webkit-transform: translate3d(200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, 65deg); opacity: 0.3;}}
@keyframes rotateCarouselLeftIn { from { -webkit-transform: translate3d(200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, 65deg); transform: translate3d(200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, 65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselRightOut { to { -webkit-transform: translate3d(200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, 65deg); opacity: 0.3;}}
@keyframes rotateCarouselRightOut { to { -webkit-transform: translate3d(200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, 65deg); transform: translate3d(200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, 65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselRightIn { from { -webkit-transform: translate3d(-200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, -65deg); opacity: 0.3;}}
@keyframes rotateCarouselRightIn { from { -webkit-transform: translate3d(-200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, -65deg); transform: translate3d(-200%,0,0) scale3d(0.4, 1, 1) rotate3d(0, 1, 0, -65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselTopOut { to { -webkit-transform: translate3d(0,-200%,0) scale3d(0.4, 0.4, 0.4) rotate3d(1, 0, 0, 65deg); opacity: 1;}}
@keyframes rotateCarouselTopOut { to { -webkit-transform: translate3d(0,-200%,0) scale3d(0.4, 0.4, 0.4) rotate3d(1, 0, 0, 65deg); transform: translate3d(0,-200%,0) scale3d(0.4, 0.4, 0.4) rotate3d(1, 0, 0, 65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselTopIn { from { -webkit-transform: translate3d(0,200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, -65deg); opacity: 0.3;}}
@keyframes rotateCarouselTopIn { from { -webkit-transform: translate3d(0,200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, -65deg); transform: translate3d(0,200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, -65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselBottomOut { to { -webkit-transform: translate3d(0,200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, -65deg); opacity: 0.3;}}
@keyframes rotateCarouselBottomOut { to { -webkit-transform: translate3d(0,200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, -65deg); transform: translate3d(0,200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, -65deg); opacity: 0.3;}}

@-webkit-keyframes rotateCarouselBottomIn { from { -webkit-transform: translate3d(0,-200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, 65deg); opacity: 0.3;}}
@keyframes rotateCarouselBottomIn { from { -webkit-transform: translate3d(0,-200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, 65deg); transform: translate3d(0,-200%,0) scale3d(0.4, 1, 1) rotate3d(1, 0, 0, 65deg); opacity: 0.3;}}

/* sides */

@-webkit-keyframes rotateSidesOut { to { -webkit-transform: translate3d(0,0,-500px) rotate3d(0, 1, 0, 90deg); opacity: 0;}}
@keyframes rotateSidesOut { to { -webkit-transform: translate3d(0,0,-500px) rotate3d(0, 1, 0, 90deg); transform: translate3d(0,0,-500px) rotate3d(0, 1, 0, 90deg); opacity: 0;}}

@-webkit-keyframes rotateSidesIn { from { -webkit-transform: translate3d(0,0,-500px) rotate3d(0, 1, 0, -90deg); opacity: 0;}}
@keyframes rotateSidesIn { from { -webkit-transform: translate3d(0,0,-500px) rotate3d(0, 1, 0, -90deg); transform: translate3d(0,0,-500px) rotate3d(0, 1, 0, -90deg); opacity: 0;}}

/* slide */

@-webkit-keyframes rotateSlideOut { 25% { -webkit-transform: translate3d(0,0,-500px); opacity: 0.5;}
    75% { -webkit-transform: translate3d(-200%,0,-500px); opacity: 0.5;}
    100% { -webkit-transform: translate3d(-200%,0,-500px); opacity: 0.5;}}
@keyframes rotateSlideOut { 25% { -webkit-transform: translate3d(0,0,-500px); transform: translate3d(0,0,-500px); opacity: 0.5;}
    75% { -webkit-transform: translate3d(-200%,0,-500px); transform: translate3d(-200%,0,-500px); opacity: 0.5;}
    100% { -webkit-transform: translate3d(-200%,0,-500px); transform: translate3d(-200%,0,-500px); opacity: 0.5;}}

@-webkit-keyframes rotateSlideIn { 0%, 25% { -webkit-transform: translate3d(200%,0,-500px); opacity: 0.5;}
    75% { -webkit-transform: translate3d(0,0,-500px); opacity: 0.5;}
    100% { -webkit-transform: translate3d(0,0,0); opacity: 1;}}
@keyframes rotateSlideIn { 0%, 25% { -webkit-transform: translate3d(200%,0,-500px); transform: translate3d(200%,0,-500px); opacity: 0.5;}
    75% { -webkit-transform: translate3d(0,0,-500px); transform: translate3d(0,0,-500px); opacity: 0.5;}
    100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1;}}


/*
UI
*/
.page-container { position: relative; overflow: hidden; box-sizing: border-box; width: 640px; height: 100%; background-color: #e7e0d3;}
.page {position: absolute; z-index: 0; overflow: hidden; box-sizing: border-box; width: 100%; 
	height: 100%; -webkit-transform-origin: center center; border: 0; background-color: #fff; 
	background-position: top center; background-size: cover; -webkit-box-orient: vertical; 
    visibility: hidden;}
.page.p-active { z-index: 2; display: block;visibility: visible;}
.page.p-current { z-index: 1; display: block; visibility: visible;}
.page-content {overflow: hidden;  height: 100%; -webkit-box-flex: 100;}

/* ==========================================================================
   图片链接
   ========================================================================== */
.p-link { position: absolute; right: 0; bottom: 150px; left: 0; text-align: center;}
.page-link .p-link { display: none; text-align: center;}
.p-current .page-link .p-link { display: block;}
.p-link .p-link-img {text-align: center; text-decoration: none; }
.p-link .p-link-text {font-size: 26px; line-height: 64px; display: inline-block; height: 64px; padding: 0 40px;text-align: center; text-decoration: none; color: white; border-radius: 32px;  background-color: #0af; }
.m-foregroundImg { position: absolute; z-index: 200;right: 0; bottom: 0; left: 0; }


/* ==========================================================================
   纯文本
   ========================================================================== */
.p-text {font-size: 32px;position: absolute; right: 0; bottom: 150px; left: 0; text-align: center;  color: #fff; }

/* ==========================================================================
   多图：图片飞入
   ========================================================================== */

.page-flying .icon-left, .page-flying .icon-right { -webkit-transition: all 0.6s; -webkit-transition-delay: 2.2s; opacity: 0;}
.p-current .page-flying .icon-left, .p-current .page-flying .icon-right { opacity: 1;}
.flying-items {position: relative; box-sizing: border-box; width: 640px; margin: 0; padding: 0; list-style: none; }
.flying-items * { overflow: hidden !important;}
.flying-items li {position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none;margin: 0;  padding: 0; }
.flying-items li:nth-child(1) {z-index: 3; display: block; }
.flying-items li:nth-child(2) {z-index: 2; display: block; }
.flying-items li:nth-child(3) {z-index: 1; display: block; }
.flying-items li img {position: absolute; top: 30px; right: 0; bottom: 30px; left: 50%;  width: 580px; margin-left: -290px;-webkit-transition: all 1s ease-out; -webkit-transform: rotateZ(30deg) scale3d(3,3,3) translate3d(80%, 80%,0); border-radius: 2px; box-shadow: 0 0 13px 0 #b8b8b8; }
.flying-items.z-viewArea li:nth-child(1) img {-webkit-transition-delay: 0.6s; -webkit-transform: rotateZ(0deg) scale3d(1,1,1) translate3d(0%, 0, 0); }
.flying-items.z-viewArea li:nth-child(2) img {-webkit-transition-delay: 0.3s; -webkit-transform: rotateZ(1.6deg) scale3d(1,1,1) translate3d(0%, 0, 0); }
.flying-items.z-viewArea li:nth-child(3) img {-webkit-transition-delay: 0s; -webkit-transform: rotateZ(3.2deg) scale3d(1,1,1) translate3d(0%, 0, 0); }
.flying-items li .imgText { font-size: 26px; line-height: 32px; position: absolute; right: 0; bottom: 0; left: 0; visibility: hidden;box-sizing: border-box; margin: 0; padding: 12px 20px; -webkit-transition: all 0.3s; -webkit-transition-delay: 0.1s; -webkit-transform: translate3d(0,100%,0); color: #fff; background-color: rgba(0,0,0,0.6); }
.flying-items li:nth-child(1) .imgText { z-index: 3; visibility: visible;}
.flying-items li:nth-child(2) .imgText { z-index: 2;}
.flying-items li:nth-child(3) .imgText { z-index: 1;}
.flying-items li.p-current .imgText { -webkit-transform: translate3d(0,0%,0);}
.flying-items li.z-hideToLeft { -webkit-animation: cascadingTeletext_hideToLeft 0.3s linear;}
.flying-items li.z-hideToLeft .imgText, .flying-items li.z-hideToRight .imgText { -webkit-transform: translate3d(0,100%,0);}
@-webkit-keyframes cascadingTeletext_hideToLeft { 0% { -webkit-transform: translate3d(0%,0,0);}
    100% { -webkit-transform: translate3d(-100%,0,0); opacity: 0;}}
.flying-items li.z-hideToRight { -webkit-animation: cascadingTeletext_hideToRight 0.3s linear;}
@-webkit-keyframes cascadingTeletext_hideToRight { 0% { -webkit-transform: translate3d(0%,0,0);}
    100% { -webkit-transform: translate3d(100%,0,0); opacity: 0;}}

/* ==========================================================================
   视频
   ========================================================================== */
.page-video .m-btnPlay {display: none; -webkit-animation: bouncein 1s ease-out backwards; }
.p-current .page-video .m-btnPlay { display: block;}
.m-btnPlay {position: absolute; z-index: 1;top: 50%; left: 50%;  display: block; width: 96px; height: 96px; margin: -34px; }
.m-btnPlay i, .m-btnPlay div {position: absolute; top: 0;left: 0;  display: block; width: 96px; height: 96px; border-radius: 50%; }
.m-btnPlay i {z-index: 1; background: url(../img/play.png) 0 0; }
.m-btnPlay div {z-index: 0; -webkit-animation: video_btnPlay 1s linear infinite; opacity: 0; background: rgba(255, 255, 255, 0.6); }
@-webkit-keyframes video_btnPlay { 0% { -webkit-transform: scale3d(1,1,1); opacity: 0.8;}
    100% { -webkit-transform: scale3d(2,2,2); opacity: 0;}}
.m-youkuVideo { width: 100%; height: 460px; margin-top: 260px; background-color: #000;}
.m-youkuVideo .videoBody {position: absolute; z-index: 0; top: 0; right: 0; bottom: 0;left: 0; display: none; -webkit-transition: all 0.8s;  background-color: rgba(0, 0, 0, 0.7); }
.m-youkuVideo .videoBody >* { width: 640px !important; height: 480px !important; margin-top: 40%; margin-bottom: 36%;}
.m-youkuVideo.z-showVideo .btnPlay { display: none;}
.m-youkuVideo.z-showVideo .videoBody { display: block;}

/* ==========================================================================
   联系我们
   ========================================================================== */
.p-contact {font-size: 32px;  position: absolute; right: 0; bottom: 150px; left: 0; width: 500px; margin: 0 auto; padding: 40px 0;border-radius: 10px; background-color: white; }
.p-contact a {text-decoration: none; color: #000; }
.p-contact .p-contact-label { padding: 10px 10px 10px 30px;}

/* ==========================================================================
   自定义表单
   ========================================================================== */
.p-form {font-size: 32px; position: absolute; right: 0; bottom: 250px; left: 0; width: 554px; margin: 0 auto; padding: 0; border-radius: 10px; background-color: white; }
.p-form-title {font-size: 40px;font-weight: bold; margin-top: 40px;  text-align: center; color: #0a85ff; }
.p-form-desc {font-size: 30px;  padding: 20px 40px 0; color: #888;}
.page-form ul { list-style: none;}
.page-form ul li { line-height: 80px; border-bottom: 1px solid #ccc;}
.page-form ul li:last-child { border-bottom: 0;}
.p-form label { margin-right: 10px; margin-left: 20px;}
.p-form input[type='checkbox'] { width: 20px; height: 20px;}
.p-form input[type='radio'] {line-height: 9px; display: inline-block; width: 20px; height: 20px; padding: 2px; -webkit-transform: scale(1.5) translateY(1px); border: 1px solid #858585; border-radius: 50%; background: transparent; }
.p-form input[type='checkbox'] {line-height: 9px; display: inline-block; width: 24px; height: 24px; padding: 2px; -webkit-transform: scale(1.5) translateY(1px); border: 1px solid #858585; border-radius: 50%; background: transparent; }
.p-form input[type='text'] {line-height: 50px; width: 60%; height: 50px; border: 0; 
	background: transparent; padding:0;margin:0;}
.p-form select { font-size: 28px; margin-left: 10px;}
.p-form textarea {display: block; width: 90%; padding:10px 5%; border: 0; line-height: 30px;
height: 90px;}
.p-form-submit {font-size: 36px; line-height: 100px; position: absolute; right: 0; bottom: 100px; left: 0; width: 554px; height: 100px; margin: 0 auto; padding: 0; text-align: center; border-radius: 10px; background-color: #0a85ff; }
.p-form-submit a {display: inline-block;width: 100%; height: 100%; text-decoration: none;  color: white; }

/* icon */
.hidden, .none { display: none !important; visibility: hidden;}
.ui-icon { position: absolute; z-index: 300; display: block; background-image: url('../img/icons.png');}
.icon-up { bottom: 50px; left: 50%; width: 48px; height: 48px; margin-left: -20px; background-position: 0 0;}
.icon-music { display: block; width: 48px; height: 48px; background-position: 48px 0;}
.icon-up.running { -webkit-animation: animateUp 1.5s infinite;}
@-webkit-keyframes animateUp { 0% { -webkit-transform: translate3d(0,42px,0); opacity: 0;}
    60% { -webkit-transform: translate3d(0,12px,0); opacity: 1;}
    100% { -webkit-transform: translate3d(0,0px,0); opacity: 0;}}
.ui-music { font-size: 24px; position: fixed; z-index: 100; bottom: 100px; left: 50%; display: block; margin-left: 248px; text-decoration: none; color: #fff;}
.ui-music.playing .icon-music { -webkit-animation: reverseRotataZ 1.2s linear infinite;}
@-webkit-keyframes reverseRotataZ { 0% { -webkit-transform: rotateZ(0deg);}
    100% { -webkit-transform: rotateZ(-360deg);}}
.icon-left, .icon-right { top: 40%; width: 48px; height: 48px; text-indent: 9999px; background-position: -48px 0;}
.icon-left { left: 18px;}
.icon-left.z-move { -webkit-animation: guidePrev 1.5s infinite;}
.icon-right { right: 18px; -webkit-transform: rotateZ(180deg);}
.icon-right.z-move { -webkit-animation: guideNext 1.5s infinite;}
@-webkit-keyframes guidePrev { 0% { -webkit-transform: translate3d(0,0,0);}
    20% { -webkit-transform: translate3d(0,0,0);}
    35% { -webkit-transform: translate3d(12px,0,0);}
    50% { -webkit-transform: translate3d(-20px,0,0);}
    65% { -webkit-transform: translate3d(0,0,0);}
    80% { -webkit-transform: translate3d(-12px,0,0);}
    100% { -webkit-transform: translate3d(0,0,0);}}

@-webkit-keyframes guideNext { 0% { -webkit-transform: translate3d(0,0,0) rotateZ(180deg);}
    20% { -webkit-transform: translate3d(0,0,0) rotateZ(180deg);}
    35% { -webkit-transform: translate3d(-12px,0,0) rotateZ(180deg);}
    50% { -webkit-transform: translate3d(20px,0,0) rotateZ(180deg);}
    65% { -webkit-transform: translate3d(0,0,0) rotateZ(180deg);}
    80% { -webkit-transform: translate3d(12px,0,0) rotateZ(180deg);}
    100% { -webkit-transform: translate3d(0,0,0) rotateZ(180deg);}}

.u-maskLayer { position: absolute; z-index: 9999; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: all 0.5s; opacity: 0; background-color: rgba(0, 0, 0, 0.7);}
.u-maskLayer.z-showing, .u-maskLayer.z-show { opacity: 1;}
.u-maskLayer-close { position: absolute; top: -30px; right: -30px; display: block; width: 100px; height: 100px; -webkit-transition: all 0.6s; -webkit-transform: translate(100%, -100%); border-radius: 50%; background: #0af;}
.u-maskLayer-close::after, .u-maskLayer-close::before { position: absolute; bottom: 35px; left: 15px; display: block; width: 42px; height: 4px; content: ''; -webkit-transform: rotateZ(45deg); border-radius: 2px; background-color: #fff;}
.u-maskLayer .u-maskLayer-close::before { -webkit-transform: rotateZ(-45deg);}
.u-maskLayer .u-maskLayer-close::after { -webkit-transform: rotateZ(45deg);}
.u-maskLayer.z-show .u-maskLayer-close { -webkit-transform: translate(0%, 0);}
.loading-line { -webkit-animation: reverseRotataZ 1.2s linear infinite;}
.loading { position: fixed; z-index: 200; top: 0; left: 0; overflow: hidden; box-sizing: border-box; width: 640px; height: 100%; margin: 0 auto; background: #000;}
#escapingBallG{position:relative;width:125px;height:43px;margin:50% auto 0;}
.escapingBallG{background-color:#fff;position:absolute;top:0;left:0;width:43px;height:43px;
	border-radius:21px;-webkit-border-radius:21px;animation-name:bounce_escapingBallG;
	-webkit-animation-name:bounce_escapingBallG;animation-duration:1.5s;
	-webkit-animation-duration:1.5s;animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;
	-webkit-animation-delay:0s;-webkit-transform:scale(.5,1);}
@keyframes bounce_escapingBallG{
	0%{left:0;transform:scale(.5,1)}
	25%{left:41px;transform:scale(1,.5)}
	50%{left:103px;transform:scale(.5,1)}
	75%{left:41px;transform:scale(1,.5)}
	100%{left:0;transform:scale(.5,1)}
}
@-webkit-keyframes bounce_escapingBallG{
	0%{left:0;-webkit-transform:scale(.5,1)}
	25%{left:41px;-webkit-transform:scale(1,.5)}
	50%{left:103px;-webkit-transform:scale(.5,1)}
	75%{left:41px;-webkit-transform:scale(1,.5)}
	100%{left:0;-webkit-transform:scale(.5,1)}
}
.logo-bar { height: 68px; margin-top: -68px; box-shadow: 0 0 18px 0 #000;}

/*
 Cover
*/

.cover-container { position: fixed; z-index: 100; top: 0; left: 0; overflow: hidden; box-sizing: border-box; width: 640px; height: 100%; margin: 0 auto;}
.cover-container .kiss { position: absolute; top: -1000px; left: -1000px;}
#clip-canvas { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; opacity: 1;}
.cover-clear { opacity: 0 !important;}
.pop-wechat { position: absolute; z-index: 999; top: 0; display: none; overflow: hidden; width: 100%; height: 100%; border: 0;}
.cover-slice, .cover-slice-v { position: absolute; overflow: hidden; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; opacity: 1; background: #fff; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden;}

/* Horizontal slice */
.cover-container .cover-slice { width: 100%; height: 50%; -webkit-transform: translateY(0%) scale(1); -moz-transform: translateY(0%) scale(1); -ms-transform: translateY(0%) scale(1); -o-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1);}
.cover-container .cover-slice:nth-child(2) { top: 50%;}
.cover-container .cover-slice:nth-child(2) img { position: absolute; bottom: 0;}
.opendoor .cover-slice:first-child { -webkit-transition: all 800ms ease-in-out; transition: all 800ms ease-in-out; -webkit-transform: translateY(-230%) rotate(-25deg) scale(2); transform: translateY(-230%) rotate(-25deg) scale(2);}
.opendoor .cover-slice:nth-child(2) { -webkit-transition: all 800ms ease-in-out; transition: all 800ms ease-in-out; -webkit-transform: translateY(230%) rotate(-25deg) scale(2); transform: translateY(230%) rotate(-25deg) scale(2);}

/* Vertical slice */

.cover-container .cover-slice-v { overflow: hidden; width: 50%; height: 100%; -webkit-transform: translateX(0%) scale(1); -moz-transform: translateX(0%) scale(1); -ms-transform: translateX(0%) scale(1); -o-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1);}
.cover-container .cover-slice-v:first-child { background-size: 640px;}
.cover-container .cover-slice-v:nth-child(2) { left: 50%; background-position: -320px 0; background-size: 640px;}
.cover-container .cover-slice-v:nth-child(2) img { position: absolute; right: 0;}
.opendoor .cover-slice-v:first-child { -webkit-transition: all 1500ms ease-in-out; transition: all 1500ms ease-in-out; -webkit-transform: translateX(-230%) rotate(15deg) scale(1.5); transform: translateX(-230%) rotate(15deg) scale(1.5);}
.opendoor .cover-slice-v:nth-child(2) { -webkit-transition: all 1500ms ease-in-out; transition: all 1500ms ease-in-out; -webkit-transform: translateX(230%) rotate(-15deg) scale(1.5); transform: translateX(230%) rotate(-15deg) scale(1.5);}
